// import Vue from 'vue'
// import Vuex from 'vuex'
// //
// Vue.use(Vuex);

export const state = () => ({
  headers: true,
  footers: true,
  cartnumber: 0,
  logoUrl: "",
  titleCon: "",
  unreadNum: 0,
  service_num: 0,
  theme: 'dark', // 默認深色主題
  showLoginModal: false, // 添加登錄模態窗顯示狀態
  homeMenus: [
    { title: "首頁", url: "/" },
    { title: "商城", url: "/goods_cate" },
    { title: "售後政策", url: "/news_detail?id=1" },
    { title: "物流政策", url: "/news_detail?id=2" },
    { title: "隱私政策", url: "/news_detail?id=3" },
    { title: "關於我們", url: "/about_us" },
  ],
});

// 在localStorage中保存主題設置
const saveThemeToStorage = (theme) => {
  if (process.client) {
    localStorage.setItem('furnitura_theme', theme);
  }
};

export const mutations = {
  isHeader(state, data) {
    state.headers = data;
  },
  isFooter(state, data) {
    state.footers = data;
  },
  cartNum(state, data) {
    state.cartnumber = data;
  },
  serviceNum(state, data) {
    state.service_num = data;
  },
  logo(state, data) {
    state.logoUrl = data;
  },
  homeMenus(state, data) {
    state.homeMenus = data;
  },
  titles(state, data) {
    state.titleCon = data;
  },
  unreadKefu(state, data) {
    state.unreadNum = data;
  },
  // 設置主題
  SET_THEME(state, theme) {
    state.theme = theme;
    saveThemeToStorage(theme);
    
    // 更新文檔根元素的data-theme屬性
    if (process.client) {
      // 先移除所有主題相關的類
      document.documentElement.removeAttribute('data-theme');
      // 設置新主題
      document.documentElement.setAttribute('data-theme', theme);
      
      // 強制重新計算樣式
      setTimeout(() => {
        console.log('設置主題:', theme);
        console.log('當前data-theme屬性:', document.documentElement.getAttribute('data-theme'));
        console.log('當前CSS變量--bg-page:', getComputedStyle(document.documentElement).getPropertyValue('--bg-page').trim());
        // 注意：這裡不設置user_set_theme，因為SET_THEME可能由系統調用
        // 只有TOGGLE_THEME才是用戶手動切換
      }, 0);
    }
  },
  // 切換主題
  TOGGLE_THEME(state) {
    const newTheme = state.theme === 'dark' ? 'light' : 'dark';
    state.theme = newTheme;
    saveThemeToStorage(newTheme);
    
    // 標記用戶手動設置了主題
    if (process.client) {
      localStorage.setItem('user_set_theme', 'true');
      
      // 先移除所有主題相關的類
      document.documentElement.removeAttribute('data-theme');
      // 設置新主題
      document.documentElement.setAttribute('data-theme', newTheme);
      
      // 強制重新計算樣式
      setTimeout(() => {
        console.log('切換主題為:', newTheme);
        console.log('當前data-theme屬性:', document.documentElement.getAttribute('data-theme'));
        console.log('當前CSS變量--bg-page:', getComputedStyle(document.documentElement).getPropertyValue('--bg-page').trim());
      }, 0);
    }
  },
  
  // 設置登錄模態窗顯示狀態
  SET_SHOW_LOGIN_MODAL(state, value) {
    state.showLoginModal = value;
  },
};

export const actions = {
  nuxtServerInit({ commit }, { app }) {
    commit("unreadKefu", app.$cookies.get("unreadKefu"));
    commit("logo", app.$cookies.get("logo"));
    commit("titles", app.$cookies.get("titles"));
  },
};
